<template>
  <div class="reMember-container">
    <div class="header">
       <div class="title">党员花名册</div>
    </div>
    <div style="margin: 20px 0;gap: 20px;" class="data-table-container">
      <el-card class="padding-10">
        <el-row :gutter="20">
          <el-col :xs="9" :sm="12">
            <div style="display: flex;">
               <div style="width: 200px">
                 <el-select v-model="partRequest.pbCommitteeId" clearable placeholder="请选择支部" @change="selectByBranch">
                   <el-option v-for="item in selectList.branchList" :key="item.id" :label="item.committeeName" :value="item.id"></el-option>
                 </el-select>
               </div>

              <div style="width: 200px;margin-left: 20px">
              <el-select v-model="partRequest.pbDepartMentId" clearable placeholder="请选择科室" @change="selectByDepart">
                <el-option v-for="item in selectList.departmentList" :key="item.id" :label="item.departMenName" :value="item.id"></el-option>
              </el-select>
              </div>
            </div>
          </el-col>
          <el-col :xs="15" :sm="12">
            <div class="flex align-center justify-content-end">
              <el-button type="primary" icon="Plus" style="margin: 0 10px"  @click="handleAdd">新增党员</el-button>
              <el-button icon="download" style="margin: 0 10px">导出</el-button>
            </div>
          </el-col>
        </el-row>

        <el-table :data="tableData"  style="width: 100%;margin-top: 10px;padding-bottom: 20px">
          <el-table-column align="center" prop="pbUserName" label="姓名"   >
            <template #default="{ row }">
               <div class="flex align-center">
                 <img  :src="row.pbSex === 'Woman' ? femaleAvatar : maleAvatar"  style="width: 30px; height: 30px;">
                 <div style="margin-left: 10px;">
                   <div>{{row.pbUserName}}</div>
                   <div>{{row.pbStaffID}}</div>
                 </div>
               </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="departMenName" label="所属科室" />
          <el-table-column align="center" prop="committeeName" label="所属支部" />
          <el-table-column align="center" prop="positionName" label="党内职务"/>
          <el-table-column align="center" prop="pbCreatorTime" label="入党时间" />
          <el-table-column align="center" prop="pbPhone" label="联系方式"   >
            <template #default="{ row }">
                  <div>{{row.pbPhone }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="pbStateName" label="党员状态"   >
            <template #default="{ row }">
              <div>{{row.pbStateName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="position:relative; padding-bottom: 20px">
          <pagination
              :total="partRequest.totalCount"
              v-model:page="partRequest.pageNumber"
              v-model:limit="partRequest.pageSize"
              @pagination="getCancerIndicatorList" />
        </div>
      </el-card>
    </div>

    <!-- 新增/编辑弹框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle"  @close="onDialogClose">
      <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" >
        <!-- 第一行：选择用户、姓名 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="选择用户" prop="userId">
              <el-select v-model="formData.userId" placeholder="请选择系统用户" style="width: 100%;">
                <el-option v-for="(item,index) in selectList.userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="pbUserName">
              <el-input v-model="formData.pbUserName" placeholder="请输入党员真实姓名" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行：性别、工号 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="pbSex">
              <el-select v-model="formData.pbSex" placeholder="请选择性别" style="width: 100%;">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
                <el-option label="未知" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="pbStaffID">
              <el-input v-model="formData.pbStaffID" placeholder="请输入对应的工号" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行：联系方式、所属科室 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系方式" prop="pbPhone">
              <el-input v-model="formData.pbPhone" placeholder="请输入11位手机号" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属科室" prop="pbDepartMentId">
              <el-select v-model="formData.pbDepartMentId" placeholder="请选择科室" style="width: 100%;">
                <el-option v-for="item in selectList.departmentList" :key="item.id" :label="item.departMenName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第四行：所属支部、党内职务 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属支部" prop="pbCommitteeId">
              <el-select v-model="formData.pbCommitteeId" placeholder="请选择支部" style="width: 100%;">
                <el-option v-for="item in selectList.branchList" :key="item.id" :label="item.committeeName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="党内职务" prop="pbPositionId">
              <el-select v-model="formData.pbPositionId" placeholder="请选择职务" style="width: 100%;">
                <el-option v-for="item in selectList.positionList" :key="item.id" :label="item.positionName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第五行：入党时间、党员状态 -->
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="入党时间" prop="pbCreatorTime">
              <el-date-picker v-model="formData.pbCreatorTime" type="date" placeholder="选择日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="党员状态" prop="pbStateId">
              <el-select v-model="formData.pbStateId" placeholder="请选择状态" style="width: 100%;">
                <el-option v-for="item in selectList.partyStatusList" :key="item.id" :label="item.stateName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行：入党时间、党员状态 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="月收入" prop="pbMoney">
              <el-input v-model="formData.pbMoney" placeholder="请输入月收入" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="党费系数" prop="PBFeeRatio">
              <el-input v-model="formData.PBFeeRatio" placeholder="请输入党费系数" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 弹框底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">重置</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup>
import {ref} from 'vue';
import maleAvatar from '../../../assets/smart/男头像.png'
import femaleAvatar from '../../../assets/smart/女头像.png'
import {decrypt} from "../../../utils/jsencrypt";
import {
  getPBCommitteeList,
  getPBDepartMentList,
  getPBPositionList,
  getPBStateList,
  addPBCPCInfo, getPBCPCInfoList, editPBCPCInfo
} from "@/api/partyMemberInfo/partyMemberInfo.js";
import {listUser} from "@/api/system/user.js";
import {ElMessage} from "element-plus";
const tableData = ref([]);
const selectList = ref({
  departmentList: [], // 科室
  branchList: [], // 支部
  positionList: [], // 职位
  partyStatusList: [], // 党员状态信息
  userList: [] // 当前用户信息列表
});
// 获取当用户下拉列表
const queryParams =ref({
  skipCount: 1,
  maxResultCount: 10000,
  userName: undefined,
  phone: undefined,
  state: true,
  deptId: undefined
})

const partRequest = ref({
      pbCommitteeId: '', // 支部
      pbDepartMentId: '', // 科室
      pageNumber:1,
      pageSize:10,
      totalCount:0,
      totalPages:0
 });

// 弹框控制
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)// 表单引用

const formData = ref({
  pbStaffID: "",  // 工号
  userId: "",  // 用户Id
  pbUserName: "", // 名称
  pbPhone: "", // 手机
  pbSex: "", // 性别
  pbDepartMentId: "", // 科室id
  pbCommitteeId: "", // 支部id
  pbPositionId: "", // 职务id
  pbCreatorTime: "", // 入党时间
  pbStateId:"", // 党员状态Id
  pbMoney: "", // 党员收入
  PBFeeRatio:"", // 党费比例
});
// 表单校验规则
const rules = {
  userId: [{ required: true, message: '请选择用户', trigger: 'change' }],
  pbUserName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  pbSex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  pbStaffID: [{ required: true, message: '请输入工号', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的11位手机号码', trigger: 'blur' }
  ],
  pbDepartMentId: [{ required: true, message: '请选择科室', trigger: 'change' }],
  pbCommitteeId: [{ required: true, message: '请选择支部', trigger: 'change' }],
  pbCreatorTime: [{ required: true, message: '请选择入党时间', trigger: 'change' }],
  pbPositionId: [{ required: true, message: '请选择党内职务', trigger: 'change' }],
  pbStateId: [{ required: true, message: '请选择党员状态', trigger: 'change' }],
  pbMoney: [{ required: true, message: '请输入月收入金额', trigger: 'blur' }],
  PBFeeRatio: [{ required: true, message: '请输入党费系数', trigger: 'blur' }],
}
// 获取肿瘤专业医疗质量控制指标列表
const getCancerIndicatorList = (pageData) => {
  partRequest.value.pageNumber = pageData.page;
  partRequest.value.pageSize = pageData.limit;
  getPBCPCList(partRequest.value); // 获取党员信息
};
// 编辑按钮
const handleEdit = (row) => {
  dialogTitle.value = '编辑党员信息'
  Object.assign(formData.value, {
    pbStaffID: row.pbStaffID,  // 工号
    userId: row.userId,  // 用户Id
    pbUserName: row.pbUserName, // 名称
    pbPhone:row.pbPhone, // 手机
    pbSex: row.pbSex, // 性别
    pbDepartMentId: row.pbDepartMentId, // 科室id
    pbCommitteeId: row.pbCommitteeId, // 支部id
    pbPositionId: row.pbPositionId, // 职务id
    pbCreatorTime: row.pbCreatorTime, // 入党时间
    pbStateId:row.pbStateId, // 党员状态Id
    pbMoney: row.pbMoney, // 入党时间
    PBFeeRatio:row.pbStateId, // 党员状态Id

  })
  formData.value.pbSex = row.pbSex == 'Male'? '男' : row.pbSex == 'Woman'?'女':'未知'
  dialogVisible.value = true
};
// 新增按钮
const handleAdd = () => {
  dialogTitle.value = '新增党员信息'
  Object.assign(formData.value, {
    pbStaffID: "",  // 工号
    userId: "",  // 用户Id
    pbUserName: "", // 名称
    pbPhone: "", // 手机
    pbSex: "", // 性别
    pbDepartMentId: "", // 科室id
    pbCommitteeId: "", // 支部id
    pbPositionId: "", // 职务id
    pbCreatorTime: "", // 入党时间
    pbStateId:"" // 党员状态Id
  })
  dialogVisible.value = true
}
// 提交表单
const submitForm = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let result = null;
      let data = null;
      if (dialogTitle.value == '编辑党员信息'){
          result = await editPBCPCInfo(formData.value);
       }else {
          result = await addPBCPCInfo(formData.value);
       }
       data = result.data.data;
      if (result.status == 200 && result.data.code == 200){
        ElMessage.success(dialogTitle.value == '编辑党员信息'?'党员编辑成功!':'党员新增成功!');
        dialogVisible.value = false
      }else {
        ElMessage.error(dialogTitle.value == '编辑党员信息'?result.data.msg:result.data.msg);
      }
      partRequest.value.pageNumber = 1; // 设为第一页
      await getPBCPCList(partRequest.value); // 获取党员信息列表
    } else {
      console.log('表单校验失败')
    }
  })
}
// 弹框关闭时重置表单
const onDialogClose = () => {
  formRef.value.resetFields()
}
// 获取科室信息
const getPBDepartMent= async () => {
  let result = await getPBDepartMentList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    selectList.value.departmentList = data
  }
}
// 获取支部信息
const getPBCommittee = async () => {
  let result = await getPBCommitteeList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    selectList.value.branchList = data
  }
}
// 获取职务信息
const getPBPosition = async () => {
  let result = await getPBPositionList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    selectList.value.positionList = data
  }
}
// 获取职务信息
const getPBState = async () => {
  let result = await getPBStateList();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    selectList.value.partyStatusList = data
  }
}
// 获取用户信息列表
const getUserList = async (requestData) => {
  let result = await listUser(requestData);
  let data = result.data;
  if (result.status == 200){
     selectList.value.userList =  data.items;
  }
}
// 获取党员信息列表
const getPBCPCList = async (requestData) => {
  const {pageNumber,pageSize,pbCommitteeId,pbDepartMentId} = requestData;
  let result = await getPBCPCInfoList({pageNumber,pageSize,pbCommitteeId,pbDepartMentId});
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const { pageNumber,pageSize,totalCount,totalPages,items} = data;
    partRequest.value.pageNumber = pageNumber;
    partRequest.value.pageSize = pageSize;
    partRequest.value.totalCount = totalCount;
    partRequest.value.totalPages = totalPages;
    tableData.value = items;
  }
}
// 获取党员信息列表
const selectByBranch =  (data) => {
  partRequest.value.pageNumber = 1;
  getPBCPCList(partRequest.value); // 获取党员信息
}
// 获取党员信息列表
const selectByDepart =  (data) => {
  partRequest.value.pageNumber = 1;
  getPBCPCList(partRequest.value); // 获取党员信息
}

getPBCPCList(partRequest.value); // 获取党员信息
getUserList(queryParams.value); // 获取当前注册所有的用户信息
getPBDepartMent();
getPBCommittee();
getPBPosition();
getPBState();





</script>
<style lang='scss' scoped>
.reMember-container {
  height: 100%;
  padding-top: 20px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin:0 20px;
  .header {
   border-radius: 5px;
    background-color: #FFFFFF;
    padding:5px 10px;
    .title{
      position: relative;
      left: -10px;
      bottom: -5px;
      width: 110px;
      text-align: center;
      border-bottom: 2px solid #F0434A;
      padding: 0px 0 5px 0;
      color: #F0434A;
      font-size: 14px;
    }
  }
}



</style>
